import React from 'react'
import './sidebar.css'
import { LineStyle,Timeline, TrendingUp, WorkOutline,Report,PermIdentity,
    Storefront,
    AttachMoney,
    BarChart,
    MailOutline,
    DynamicFeed,
    ChatBubbleOutline } from '@material-ui/icons'
    import {Link} from "react-router-dom"

export default function Sidebar() {
    return (
        <div className='sidebar'>
           <div className="sidebarWrapper">
               <div className="sidebarMenu">
                   <div className="sidebarTitle">Dashboard</div>
                   <ul className='sidebarList'>
                       <Link to="/" className='link'>
                        <li className='sidebarListItem active'>
                            <LineStyle className="sidebarIcon" />
                            Home
                        </li>
                       </Link>
                       <li className='sidebarListItem'>
                           <Timeline className="sidebarIcon" />
                           Analytics
                       </li>
                       <li className='sidebarListItem'>
                           <TrendingUp className="sidebarIcon" />
                           Sales
                       </li>
                   </ul>
                   <div className="sidebarTitle">Quick Menu</div>
                   <ul className='sidebarList'>
                      <Link to="/users" className='link'>
                      <li className='sidebarListItem'>
                           <PermIdentity className="sidebarIcon" />
                           Users
                       </li>
                      </Link>
                      <Link to="products" className='link'>
                      <li className='sidebarListItem'>
                           <Storefront className="sidebarIcon" />
                           Products
                       </li>
                      </Link>
                       <li className='sidebarListItem'>
                           <AttachMoney className="sidebarIcon" />
                           Transactions
                       </li>
                       <li className='sidebarListItem'>
                           <BarChart className="sidebarIcon" />
                           Reports
                       </li>
                   </ul>
                   <div className="sidebarTitle">Notifications</div>
                   <ul className='sidebarList'>
                       <li className='sidebarListItem'>
                           <MailOutline className="sidebarIcon" />
                           Mail
                       </li>
                       <li className='sidebarListItem'>
                           <DynamicFeed className="sidebarIcon" />
                           Feedback
                       </li>
                       <li className='sidebarListItem'>
                           <ChatBubbleOutline className="sidebarIcon" />
                           Messages
                       </li>
                   </ul>
                   <div className="sidebarTitle">Staffs</div>
                   <ul className='sidebarList'>
                       <li className='sidebarListItem'>
                           <WorkOutline className="sidebarIcon" />
                           Manage
                       </li>
                       <li className='sidebarListItem'>
                           <Timeline className="sidebarIcon" />
                           Analytics
                       </li>
                       <li className='sidebarListItem'>
                           <Report className="sidebarIcon" />
                           Reports
                       </li>
                   </ul>
               </div>
               
           </div>
        </div>
    )
}
